<template>
	<view :style="{'--color': color}">
		<view class="topBg bg00 p-re">
			<view class="card thmeBg bor_radius_30 p-ab white">
				<image :src="$imgUrls('Uploads/User_img/shadingImg.png')" mode="aspectFill" class="wh p-ab"></image>
				<view class="size26 bold padding30">{{ pageData.agent_name }}</view>
				<view class="d-flex text-center m-bot30">
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.allStoreNum }}</text>个</view>
						<view>辖区店铺</view>
					</view>
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.allOrderNum }}</text>单</view>
						<view>辖区总单量</view>
					</view>
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.allOrderMoney }}</text></view>
						<view>辖区总流水</view>
					</view>
				</view>
				<view class="d-flex text-center m-bot30">
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.dispatchOrderNum }}</text>单
						</view>
						<view>待安装</view>
					</view>
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.dispatchOrderNum2 }}</text>单
						</view>
						<view>已完成</view>
					</view>
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.dispatchOrderNum3 }}</text>单
						</view>
						<view>安装失败</view>
					</view>
				</view>
				<view class="d-flex text-center">
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.allNoDispatchOrderNum }}</text>单
						</view>
						<view>未预约</view>
					</view>
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.monthOrderNum }}</text>单</view>
						<view>当月单量</view>
					</view>
					<view class="w-333">
						<view class="h7"><text class="size36 m-right4">{{ pageData.monthOrderMoney }}</text></view>
						<view>当月流水</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding20 m-top60">
			<view class="d-flex p-left20 m-bot30">
				<view class="flex-1 size30 color_33 bold">辖区店铺</view>
				<view class="padding6-20 thmeBg bor_radius_10 white" @click="toUrl('/joinPage/addStore')"
					v-if="storeList.length">添加店铺</view>
			</view>
			<view class="bgf8 bor_radius_6 padding20 d-flex m-bot20" v-for="(item,index) in storeList" :key="index"
				@click="toUrl('/joinPage/storeDetail?store_id=' + item.shop_id + '&agent_id=' + pageData.agent_id + '&getType=3')">
				<image :src="$imgUrls(item.logo)" mode="aspectFill" class="logo"></image>
				<view class="p-left20 flex-1">
					<view class="d-flex m-bot10">
						<view class="flex-1">
							<text class="label m-right10 d-inline-block" v-if="item.bussName">{{ item.bussName }}</text>
							<text class="size28 color_33 bold m-right10">{{ item.name }}</text>
						</view>
						<text class="iconfont icon-tubiao09 thmeColor"
							@click.stop="toUrl('/joinPage/addStore?store_id=' + item.shop_id)"
							v-if="item.status == 0"></text>
					</view>
					<view class="d-flex a-center m-bot10">
						<view class="flex-1 color_66 m-right10">{{ item.address }}</view>
						<view class="size26 color_66" v-if="item.distance">{{ item.distance }}km</view>
					</view>
					<view class="d-flex j-sb text-center color_66">
						<view>
							<view class="size32">{{ item.monthOrderNum }}</view>
							<view class="size22">当月单量(单)</view>
						</view>
						<view>
							<view class="size32">{{ item.monthOrderMoney }}</view>
							<view class="size22">当月流水</view>
						</view>
						<view>
							<view class="size32 color_FOD">{{ item.dispatchOrderNum }}</view>
							<view class="size22">待安装(单)</view>
						</view>
					</view>
				</view>
			</view>

			<empty v-if="noData" cat='3' msg='您还没有相关的店铺' pad='40'></empty>
			<view v-if="noData" class="btn flexac thmeBg bor_radius_10 size30 white"
				@click="toUrl('/joinPage/addStore')">
				添加店铺</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				pageData: '',
				storeList: [],
				noData: false,
			}
		},
		async created() {
			this.getInfo()
			if (this.position.longitude == 0) {
				await this.$pop.getLocation()
				if (this.position.longitude) this.getInfo()
			}
		},
		methods: {
			getInfo() {
				this.$http.post({
					url: '/userAgentApi/getAgentInfo'
				}).then(res => {
					this.pageData = res.agentInfo
					this.storeList = res.data || []
					if (!this.storeList.length) this.noData = true
				})
			},
		},
		computed: {
			...mapState(['color', 'position'])
		},
	}
</script>

<style lang="scss" scoped>
	.topBg {
		height: 410rpx;

		.card {
			width: 690rpx;
			height: 430rpx;
			left: 30rpx;
			top: 30rpx;
			z-index: 10;
		}
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
	}

	.label {
		padding: 4rpx 10rpx;
		background: #990000;
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #fff;
	}

	.btn {
		width: 260rpx;
		height: 80rpx;
		margin: 40rpx auto 0;
	}
</style>